{% extends 'htmls/base_template.html' %}
{% load static %}

{% block top_script_section %}
    <script type="application/javascript">
{#        var update = false;#}
{#        var do_perm_url = null;#}
        var perms_map={};

        function add_permission(url) {
            if (!validate_form_ex('id_permission_form', {
                        rules: {
                            code: {
                                required: true,
                                maxLength: 50
                            }
                        },
                        messages: {
                            code: {
                                required: "请输入权限名称",
                                maxLength: "权限名称不能大于50个字符"
                            }
                        }
                    })) {
                return;
            }

            $.ajax({
                type: 'POST',
                url: url,
                dataType: 'json',
                async: false,
                data: $('#id_permission_form').serialize(),
                success: function (data, status) {

                },
                error: function () {

                }

            });
            window.location.href = "/LN_game/permission/query/";
        }
        function show_perm_dialog(update, perm) {
            var perm_form = $('<div class="dialog_1" id="id_dlg_add_permission"><div class="panel-heading"><h3 id="id_title" class="panel-title">新增权限</h3></div><form id="id_permission_form" method="post"><div class="panel-body"><!-- 权限 --><div class="form-group"><div class="col-sm10"><input id="id_perm_code" type="text" class="form-control" name="code" maxlength="50" placeholder="权限名"></div></div><!-- 描述 --><div class="form-group"><div class="col-sm10"><label>权限描述:</label></div><div class="col-sm10"><textarea id="id_perm_desc" class="form-control" name="name"></textarea></div></div><div class="row my_button"><div class="col-xs-6"><input class="btn btn-info btn-block" type="button" id="id_btn_add" value="提交"></div><div class="col-xs-6"><input type="button" class="btn btn-info btn-block" id="id_btn_cancel" value="取消" onclick="close_modal_dialog();"></div></div></div></form></div>');
            show_modal_dialog(perm_form);

            if (update){
                $('#id_title').text('更改权限');
                $('#id_perm_code').val(perm['code']);
                $('#id_perm_desc').val(perm['name']);
                $('#id_btn_add').on('click', function(){
                    add_permission("{{ edit_permission_url }}");
                });
            } else {
                $('#id_title').text('添加权限');
                $('#id_btn_add').on('click', function(){
                    add_permission("{{ add_permission_url }}");
                });
            }
        }
        function update_permission(code) {
            show_perm_dialog(true, perms_map[code]);
        }

        $(document).ready(function () {
            $('#id_btnAdd').on("click", function () {
                show_perm_dialog(false, null);
            });
        })
    </script>
{% endblock %}

{% block body_section %}

{% endblock %}

{% block content_section %}
    <div class="panel panel-default" xmlns="http://www.w3.org/1999/html">
        <div class="panel-heading">
            <h3 class="panel-title">权限列表</h3>
        </div>
        <div>
            {% if "添加权限" in perms %}
                <input type="button" id="id_btnAdd" value="添加">
            {% endif %}

            {% if "删除权限" in perms %}
                <input type="button" value="删除" onclick="delete_multiple_objects();">
            {% endif %}
        </div>
        <div class="panel-body">
            <script type="text/javascript">
                jQuery(document).ready(function ($) {
                    $("#example-2").dataTable({
                        dom: "t" + "<'row'<'col-xs-6'i><'col-xs-6'p>>",
                        aLengthMenu: [
                            [5, 25, 50, 100, -1], [10, 25, 50, 100, "All"]
                        ],
                        bProcessing: true,
                        bPaginate: true,
                        fnDraw: false,
                        bLengthChange: true,
                        bStateSave: false,
                        bServerSide: true,
                        sServerMethod: "POST",
                        sAjaxSource: "{{ query_permission_url }}",
                        fnServerParams: function (aoData) {
                        },
                        columns: [
                            {
                                "data": "code",
                                bSortable: false, "render": function (obj, type, full) {
                                perms_map[obj] = full;
                                return '<input type="checkbox" class="cbr" onchange="select_multiple_objects(this,\'code\',\'' + obj + '\');">';
                            }
                            },

                            {"data": "code"},
                            {"data": "name"},
                            {"data": "creator"},
                            {"data": "create_time"},
                            {
                                "data": "code",
                                "render": function (obj, type, full) {
                                    return '<a onclick="update_permission(\'' + obj + '\');" class="btn btn-secondary btn-sm btn-icon">编辑</a>';
                                }
                            }
                        ],
                        language: {
                            "sProcessing": "处理中...",
                            "sLengthMenu": "每页显示 _MENU_ 条结果",
                            "sZeroRecords": "没有匹配结果",
                            "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 ,_TOTAL_条)",
                            "sInfoEmpty": "显示第 0 至 0 条结果，共 0 条",
                            "infoFiltered": "(从 _MAX_ 条记录过滤)",
                            "sInfoPostFix": "",
                            "sSearch": "模糊搜索:",
                            "sUrl": "",
                            "sEmptyTable": "表中数据为空",
                            "sLoadingRecords": "载入中...",
                            "sProcessing": "<img src='{% static 'assets/images/loding.gif'%}'/> 正在加载数据...",
                            "sInfoThousands": ",",
                            "oPaginate": {
                                "sFirst": "首页",
                                "sPrevious": "上页",
                                "sNext": "下页",
                                "sLast": "末页"
                            }
                        },
                    });
                });
            </script>
            <table class="table table-bordered table-striped" id="example-2"
                   name="id_data_table">
                <thead>
                <tr>
                    <th></th>
                    <th>权限名称</th>
                    <th>权限说明</th>
                    <th>创建者</th>
                    <th>创建日期</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody class="middle-align">
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}